<!-- modalBox.vue -->
<template>
	<div class="modalBox" v-show="isClose">
		<div class="modal">
			<div class="close" v-if="modalPage != 'makeSucceed'" @click="isClose = false"><i class="iconfont icon-guanbi"></i></div>
			<component v-bind:is="modalPage" ref="madal" v-model="modalPage"></component>
			
		</div>
	</div>
</template>
<script>

	// import components from './modal/components'
	import modalLoad from './modal/modalLoad.js'
	console.log(modalLoad)
	export default{
		name:'modalBox',
		props:{
			value: [String],
		},
		data(){
			return{
				modalPage:'SignIn',
				isClose:false,
			}
		},
		components:modalLoad,
		watch:{
			value(val){
				if (val) {
					this.isClose = true
					this.modalPage = val
				}
				
			},
			isClose(val){
				this.$emit('input', '');
			},
			modalPage(val){
				if (val == '') {
					this.isClose = false
				}
			}
			
		},
		methods:{
			
		},
		mounted(){
			
		}
	}
</script>
<style scoped lang="scss">
@import '@/assets/utils/utils.scss';
.modalBox{
	position: fixed;
	top:0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.7);
	z-index: 999;

}
.modal{
	width: 590px;
	background-color: #e4e3e3;
	border-radius:8px;
	position: absolute;
	left: 50%;
	margin-left: -295px;
	top:190px;
}
.close{
	position: absolute;
	top: -50px;
	right: -50px;
	z-index: 9;
	i{
		font-size: 70px;
		color: #fff;
	}
}
</style>